<template>
    <div class="header">
        <div class="header-left"><span class="iconfont">&#xe677;</span></div>
        <div class="header-input">
            <span class="iconfont">&#xe6ae;</span>
            输入城市/景点/游玩主题
        </div>
        <router-link to="City">
        <div class="header-right">
            {{this.city}}
            <span class="iconfont">&#xe615;</span>
        </div>
        </router-link>
    </div>
</template>

<script type="text/ecmascript-6">
import {mapState} from 'vuex'
export default{
   name:'headerCity',
   computed:{
     ...mapState(['city'])
   }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.header
    display flex
    line-height 0.84rem
    background $bgColor
    color #fff
    .header-left
        float left
        width 0.64rem
        & .iconfont
            display inline-block
            margin-left 7px
            font-size 22px
    .header-input
        flex 1
        margin-top 0.12rem
        margin-left 0.1rem
        line-height 32px
        height 0.64rem
        color #ccc
        background #fff
        border-radius 0.1rem
        & .iconfont
            margin-left 10px
            color #44E0C2
    .header-right
        float right
        width auto
        padding: 0 4px
        text-align center
        color #fff
        & .iconfont
            font-size 15px
</style>
